<template>
  <div class="notification-page">
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
      <router-link to="/english" class="text-dark">
        <i class="bi bi-chevron-left fs-4"></i>
      </router-link>
      <h5 class="mb-0 mx-auto">消息通知</h5>
      <button class="btn btn-link text-dark" @click="markAllAsRead">
        <small>全部已读</small>
      </button>
    </div>

    <!-- 通知列表 -->
    <div class="notification-container">
      <div v-if="messages.length === 0" class="empty-message text-center py-5">
        暂无消息通知
      </div>
      <div v-else class="message-list">
        <div v-for="message in messages" 
             :key="message.id" 
             class="message-item"
             :class="{ unread: !message.isRead }"
             @click="goToDetail(message.id)">
          <div class="message-content">
            <div class="d-flex justify-content-between align-items-start">
              <h6 class="message-title mb-2">
                <i v-if="!message.isRead" class="bi bi-circle-fill text-primary me-2"></i>
                {{ message.title }}
              </h6>
              <small class="text-muted">{{ message.time }}</small>
            </div>
            <div class="message-text mb-0" v-html="message.content "></div>
          </div>
          <button 
            v-if="!message.isRead"
            class="btn btn-link text-primary" 
            @click.stop="markAsRead(message.id)">
            <i class="bi bi-check-circle fs-5"></i>
          </button>
        </div>
      </div>
    </div>
    <!-- 分页按钮 -->
    <div class="pagination d-flex justify-content-center mt-3">
      <button @click="prevPage" :disabled="currentPage === 1" class="btn btn-outline-secondary mr-2">上一页</button>
      <button @click="nextPage" :disabled="currentPage === totalPages" class="btn btn-outline-secondary">下一页</button>
    </div>
    <br/>
    <!-- 底部导航 -->
    <div class="bottom-nav">
      <div class="d-flex justify-content-around">
        <div class="text-center">
          <router-link to="/english" class="text-decoration-none text-dark">
            <i class="bi bi-house-door"></i>
            <div>首页</div>
          </router-link>
        </div>
        <div class="text-center">
          <router-link to="/qa" class="text-decoration-none text-dark">
            <i class="bi bi-chat-dots"></i>
            <div>答疑</div>
          </router-link>
        </div>
        <div class="text-center">
          <router-link to="/profile" class="text-decoration-none text-dark">
            <i class="bi bi-person"></i>
            <div>我的</div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from '@/router/http'

export default {
  name: 'NotificationView',
  data() {
    return {
      messages: [
        // {
        //   id: 1,
        //   title: '系统通知',
        //   content: '您有新的学习任务待完成',
        //   time: '2024-03-20 10:30',
        //   isRead: false
        // },
        // {
        //   id: 2,
        //   title: '课程提醒',
        //   content: '您预约的课程将在30分钟后开始',
        //   time: '2024-03-20 09:00',
        //   isRead: true
        // },
        // {
        //   id: 3,
        //   title: '答疑回复',
        //   content: '您的提问"英语完形填空如何提高正确率"收到了新的回答',
        //   time: '2024-03-19 15:20',
        //   isRead: false
        // },
        // {
        //   id: 4,
        //   title: '学习进度提醒',
        //   content: '您已经连续学习5天了，继续保持！',
        //   time: '2024-03-19 10:00',
        //   isRead: true
        // },
        // {
        //   id: 5,
        //   title: '考研资讯',
        //   content: '2025年考研大纲预计将在9月份发布',
        //   time: '2024-03-18 14:30',
        //   isRead: false
        // }
      ],
      currentPage: 1, // 当前页码，初始化为1
      pageSize: 10, // 每页显示的记录数
      totalPages: 0, // 总页数
      childIds:[]
    }
  },
  mounted() {
    this.fetchQuestions();
  },
  methods: {
    async fetchQuestions() {
      try {
        const response = await http.get(`/student/inform/getInformList?page=${this.currentPage}&size=${this.pageSize}`);
        this.messages = [];
        // 假设后端接口返回的数据格式包含data和total两个字段
        const  total  = response.data.response.total;
        const  data = response.data.response.list;
        data.forEach(item => {
          this.messages.push({
            id: item.informId,
            childId: item.childId,
            title: item.informTypeStr,
            content: item.content,
            time: item.createTime,
            isRead: item.isRead == 0 ? true : false,
          })
        })
        this.totalPages = Math.ceil(total / this.pageSize);
      } catch (error) {
        console.error('获取消息列表数据失败：', error);
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.fetchQuestions();
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.fetchQuestions();
      }
    },
    async markAsRead(messageId) {
      try {
        // 这里替换为实际的API接口
        const message = this.messages.find(msg => msg.id === messageId)
        if (message) {
          await http.post(`/student/inform/markAsRead/${message.childId}`)
          message.isRead = true
        }
      } catch (error) {
        console.error('标记已读失败：', error)
      }
    },
    async markAllAsRead() {
      try {
        // 这里替换为实际的API接口
        await http.post('/student/inform/markAllAsRead')
        this.messages.forEach(msg => {
          msg.isRead = true
        })
      } catch (error) {
        console.error('标记全部已读失败：', error)
      }
    },
    goToDetail(messageId) {
       this.markAsRead(messageId)
       this.$router.push(`/notification/${messageId}`)
    }
  }
}
</script>

<style scoped>
.notification-page {
  background-color: #f0f9f9;
  padding-bottom: 60px;
  min-height: 100vh;
}

.header {
  padding: 15px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.notification-container {
  padding: 15px;
}

.message-item {
  background: white;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  cursor: pointer;
  transition: all 0.3s ease;
}

.message-item:hover {
  transform: translateX(5px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.message-item.unread {
  border-left: 3px solid #00b8a9;
}

.message-content {
  flex: 1;
  margin-right: 10px;
}

.message-title {
  color: #333;
  font-weight: 600;
}

.message-text {
  color: #666;
  font-size: 0.9rem;
}

.empty-message {
  color: #999;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 10px 0;
  border-top: 1px solid #eee;
  z-index: 1000;
}

.btn-link {
  text-decoration: none;
}

.bi-circle-fill {
  font-size: 8px;
  vertical-align: middle;
}
</style> 